ChamCongPanel = Ext.extend(AbstractPanel, {
	layout : {
        type : 'vbox',
        align : 'stretch'
    },
    
    height : 900,
    
    initComponent : function() {
		this.formLabel = new Ext.form.Label({
			cls : 'main-title',
			text : lang.text.chamCong.title
		});
		
		this.formLabelContainer = new Ext.Container({
			cls : 'field-align-center',
			items : [this.formLabel]
		});
		
		var fieldPlugin = new CustomizedFieldPlugin();
		this.chonDoiTruongCombo = new Ext.form.ComboBox({
			name : 'nvDoiTruong',
			hiddenName : 'nvDoiTruong-id',
            fieldLabel : lang.text.chamCong.doiBanHang,
            selectOnFocus : true,
            width : 250,
            forceSelection : true,
            mode : 'local',
            triggerAction : 'all',
            valueField : 'id',
            displayField : 'maNv',
            tpl:'<tpl for="."><div class="x-combo-list-item">{maNv}&nbsp;' + '</div></tpl>',
            store : new Ext.data.JsonStore({
                fields : ['id', 'maNv']
            }),
			allowBlank : false,
			mandatory : true,
			plugins : fieldPlugin
		});
		
		this.xuatChamCongBtn = new Ext.Button({
			width : 130,
			text : lang.text.chamCong.xuatChamCong
		});
		var firstDay = new Date();
		firstDay.setDate(1);
		this.ngayChamCongFromDateField = new ThienTanDateField({
			fieldLabel : lang.text.chamCong.dateFrom,
			width : 120,
			value : firstDay,
			name: 'ngayChamFrom',
			selectOnFocus : true,
			allowBlank : false,
			mandatory : true
		});
		
		this.ngayChamCongToDateField = new ThienTanDateField({
			fieldLabel : lang.text.chamCong.dateTo,
			width : 120,
			value : new Date(),
			name : 'ngayChamTo',
			selectOnFocus : true,
			allowBlank : false,
			mandatory : true
		});
		
		var ngayChamCongCtn = new Ext.Container({
			layout : 'column',
			width : 800,
			items : [Utility.createLayoutForComponent(this.ngayChamCongFromDateField, 140), {xtype : 'spacer', width : 30},
			         Utility.createLayoutForComponent(this.ngayChamCongToDateField, 30)]
		})
		
		this.chonNvCombo = new Ext.form.ComboBox({
			name : 'nv',
			hiddenName : 'nv-id',
            fieldLabel : lang.text.chamCong.chonNv,
            width : 250,
            forceSelection : true,
            selectOnFocus : true,
            expandOnFocus : true,
            mode : 'local',
            triggerAction : 'all',
            valueField : 'id',
            displayField : 'maNv',
            lastQuery : '',
            store : new Ext.data.JsonStore({
                fields : ['id', 'maNv', 'doiTruong-id']
            }),
			allowBlank : false,
			mandatory : true,
			plugins : fieldPlugin
		});
		
		this.soTienDisplayField = new Ext.form.DisplayField({
			name : 'soTien',
            fieldLabel : lang.text.chamCong.soTien,
            width : 250
		});
		
		var quyetToanCtn = new Ext.Container({
			layout : 'column',
			width : 900,
			defaults : {
				columnWidth : .5
			},
			items : [Utility.createLayoutForComponent(this.chonNvCombo, 140), {xtype : 'spacer', width : 15},
			         Utility.createLayoutForComponent(this.soTienDisplayField, 80)]
		})
		
		this.quyetToanBtn = new Ext.Button({
			width : 130,
			text : lang.text.quyetToan
		});
		
		this.detailContainer = new Ext.Container({
			width : 1000,
			layout : 'form',
			height : 500,
			items : [Utility.createLayoutForComponent(this.chonDoiTruongCombo, 140), {xtype : 'spacer', height : 15},
			         ngayChamCongCtn, {xtype : 'spacer', height : 15},
				     this.xuatChamCongBtn, {xtype : 'spacer', height : 15},
				     quyetToanCtn, {xtype : 'spacer', height : 15},
					 this.quyetToanBtn]
		});
		
		this.items = [this.formLabelContainer, {xtype : 'spacer', height : 15}, this.detailContainer];
		ChamCongPanel.superclass.initComponent.call(this);
	},
	
	afterRender : function() {
		this.submitButtons = [this.xuatChamCongBtn, this.quyetToanBtn];
		this.initData();
		this.chonDoiTruongCombo.on('select', this.reloadNhanVien, this);
		this.chonNvCombo.on('select', this.calculateAmount, this);
		this.xuatChamCongBtn.on('click', this.xuatChamCong, this);
		this.quyetToanBtn.on('click', this.quyetToan, this);
		ChamCongPanel.superclass.afterRender.call(this);		
	},
	
	initData : function() {
		Ext.Ajax.request({
            url : 'nhanVien/loadDoiTruongAndNvBanHang',
            method : 'GET',
            scope : this,
            success : function(response, opts){
                var result = Ext.decode(response.responseText);
                this.chonDoiTruongCombo.store.loadData(result.doiTruongs);
                if(result.doiTruongs.length > 0){
                	this.chonDoiTruongCombo.setValue(result.doiTruongs[0].id);
                	this.chonNvCombo.store.loadData(result.nhanViens);
                	this.reloadNhanVien(this.chonDoiTruongCombo, this.chonDoiTruongCombo.store.getById(result.doiTruongs[0].id));
                	this.chonDoiTruongCombo.focus(true);
                } else {
                	this.xuatChamCongBtn.disable();
                }
            }, 
            failure : function() {}
        });
	},
	
	reloadNhanVien : function(combo, record, index) {
		if (this.chonNvCombo.store.isFiltered()) {
			this.chonNvCombo.store.clearFilter();
		}
		this.chonNvCombo.clearValue();
		var value = record.get("id");
		if (value != null && value != "") {
			this.chonNvCombo.store.filterBy(function(record) {
				return record.get('doiTruong-id') == value || record.get('id') == value ;
			});
		}
	},
	
	calculateAmount : function(combo, record, index) {
		Ext.Ajax.request({
			url : 'thuNgan/tinhSoTienQuyetToan',
	        params : {
	        	'fromDate' : this.ngayChamCongFromDateField.getValue(),
	        	'toDate' : this.ngayChamCongToDateField.getValue(),
	        	'nvId' : this.chonNvCombo.getValue()
	        },
	        method : 'GET',
	        scope : this,
	        success : function(response, opts){
	            var result = Ext.decode(response.responseText);
	            if (result.success) {
					this.soTienDisplayField.setValue(Utility.formatThousandSeparator(result.amount))
				} else {
					this.notifyMessage({action : 'error', msg : result.msg});
				}
	        }, 
	        failure : Ext.emptyFn
		});
	},
	
	xuatChamCong : function() {
		var maDt = this.chonDoiTruongCombo.getValue();
		if (maDt == null || maDt == "") {
			this.notifyMessage({action : "error", msg : lang.msg.responseClientInvalidError});
			this.chonDoiTruongCombo.markInvalid({id : 'nvDoiTruong', action : 'error', msg : lang.msg.notSelectDoiTruong});
			return;
		}
		
		if (this.ngayChamCongFromDateField.activeError || this.ngayChamCongToDateField.activeError) {
			this.notifyMessage({action : "error", msg : lang.msg.responseClientInvalidError});
			return;
		}
		
		if (this.ngayChamCongFromDateField.getValue() > this.ngayChamCongToDateField.getValue()) {
			this.notifyMessage({action : "error", msg : lang.msg.responseClientInvalidError});
			this.ngayChamCongToDateField.markInvalid({id : 'ngayChamTo', action : 'error', msg : lang.msg.invalidNgayCham});
			return;
		}
		
		this.disableButtons();
		var params = this.getForm().getFieldValues();
		params.maNv = this.chonDoiTruongCombo.getRawValue()
		Utility.processExportWaitingWithParams("nhanVien/export", params);
    	this.enableButtons();
	},
	
	quyetToan : function() {
		var maNv = this.chonNvCombo.getValue();
		if (maNv == null || maNv == "") {
			this.notifyMessage({action : "error", msg : lang.msg.responseClientInvalidError});
			this.chonNvCombo.markInvalid({id : 'nv', action : 'error', msg : lang.msg.notSelectNvQuyetToan});
			return;
		}
		
		if (this.ngayChamCongFromDateField.activeError || this.ngayChamCongToDateField.activeError) {
			this.notifyMessage({action : "error", msg : lang.msg.responseClientInvalidError});
			return;
		}
		
		Ext.Msg.buttonText.ok = lang.text.ok;
		Ext.Msg.buttonText.cancel = lang.text.cancel;
		Ext.Msg.show({
			title : lang.text.notice,
			msg : lang.msg.confirmQuyetToanBanHang,
			icon: Ext.MessageBox.WARNING,
			buttons: Ext.Msg.OKCANCEL,
			scope : this,
			fn: function(buttonId, text, opts){
				if (buttonId == "ok") {
					var waitingBox = Ext.MessageBox.wait(lang.text.pleaseWait, lang.text.loading);
					Ext.Ajax.request({
						url : 'nhanVien/quyetToan',
				        params : {
				        	'fromDate' : this.ngayChamCongFromDateField.getValue(),
				        	'toDate' : this.ngayChamCongToDateField.getValue(),
				        	'nvId' : this.chonNvCombo.getValue()
				        },
				        method : 'GET',
				        scope : this,
				        success : function(response, opts){
				        	waitingBox.hide();
				            var result = Ext.decode(response.responseText);
				            this.soTienDisplayField.setValue("0");
				            this.notifyMessage(result.msg);
				        }, 
				        failure : Ext.emptyFn
					});
				}
			}
		});
	},
    
    defaultActionHandler : function(){
    	this.xuatChamCong();
	}
});